<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened}">
    <div class="default-header">
        <div class="row">
            <h1 class="col">Ethernet switch configuration</h1>
        </div>
    </div>
    <div class="default-content" *ngIf="ethernetSwitchTemplate">
        <mat-accordion>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        General settings
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <form [formGroup]="inputForm">
                    <mat-form-field class="form-field">
                        <input 
                            matInput type="text" 
                            [(ngModel)]="ethernetSwitchTemplate.name" 
                            formControlName="templateName"
                            placeholder="Template name">
                    </mat-form-field>
                    <mat-form-field class="form-field">
                        <input 
                            matInput type="text" 
                            [(ngModel)]="ethernetSwitchTemplate.default_name_format" 
                            formControlName="defaultName"
                            placeholder="Default name format">
                    </mat-form-field>
                    <mat-form-field class="form-field">
                        <input 
                            matInput type="text" 
                            [(ngModel)]="ethernetSwitchTemplate.symbol" 
                            formControlName="symbol"
                            placeholder="Symbol">
                    </mat-form-field>
                    <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
                    <mat-form-field class="form-field">
                        <mat-select 
                            placeholder="Category" 
                            [ngModelOptions]="{standalone: true}" 
                            [(ngModel)]="ethernetSwitchTemplate.category">
                            <mat-option *ngFor="let category of categories" [value]="category[1]">
                                {{category[0]}}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                    <mat-form-field class="select">
                        <mat-select 
                            placeholder="Console type" 
                            [ngModelOptions]="{standalone: true}" 
                            [(ngModel)]="ethernetSwitchTemplate.console_type">
                                <mat-option *ngFor="let type of consoleTypes" [value]="type">
                                    {{type}}
                                </mat-option>
                        </mat-select>
                    </mat-form-field>
                </form>
            </mat-expansion-panel>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Port settings
                    </mat-panel-title>
                </mat-expansion-panel-header>
            <app-ports #ports [ethernetPorts]="ethernetSwitchTemplate.ports_mapping"></app-ports>
            </mat-expansion-panel>
        </mat-accordion>
        <div class="buttons-bar">
            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
            <button mat-raised-button color="primary" (click)="onSave()">Save</button>
        </div>
    </div>
</div>
<app-symbols-menu *ngIf="isSymbolSelectionOpened && ethernetSwitchTemplate" [server]="server" [symbol]="ethernetSwitchTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
